<template>
  <div class="card-body" :style="cardStyle">
    <div class="card-value" :title="count">{{ count }}</div>
    <div class="card-label">{{ label }}</div>
  </div>
</template>

<script>
export default {
  name: 'statCard',
  props: {
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    customCardLists: {
      type: String,
      default: "1, 2, 3, 4, 5, 6"
    },
    way: {
      type: String,
      default: 'sum'
    },
    label: {
      type: String,
      default: '用户总数'
    },
    cardWidth: {
      type: Number,
      default: 400
    },
    textColor: {
      type: String,
      default: '#FFFFFF'
    },
    cardBackground: {
      type: String,
      default: '#FF8040'
    }
  },
  data() {
    return {}
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    cardStyle() {
       return {
        background: this.cardBackground,
        color: this.textColor,
        width: this.cardWidth + "px",
      };
    },
    count() {
      try {
        const list = this.customCardLists.split(",").map((item) => _.toNumber(item));
        const { way } = this
        return _[`${way}`](list)
      } catch(err) {
        return 0
      }
    }
  },
};
</script>

<style scoped>
.card-body {
  text-align: justify;
  padding-left: 10px;
}

.card-value {
  font-size: 30px;
  font-weight: bold;
  max-width: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-label {
  font-size: 14px;
  padding-left: 6px;
}
</style>